<template>
  <div class="header">
    <div class="top">
      <div class="left" @click="selectCityFn">
        <span>城市</span> 
        <van-icon name="arrow-down" size="4px" />
      </div>
      <div class="center">影院</div>
      <div class="right">
        <van-icon name="search" size="20px"/>
      </div>
    </div>
    <div class="tabs">
      <div class="left">
        全城 <van-icon name="arrow-down" size="4px"/>
      </div>
      <div class="center">
        APP订票 <van-icon name="arrow-down" size="4px"/>
      </div>
      <div class="right">
        最近去过 <van-icon name="arrow-down" size="4px"/> 
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    selectCityFn(){
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  position: fixed;
  top: 0;
  width: 100vw;
  background: #fff;
  .top{
    display: flex;
    justify-content: space-between;
    height: 44px;
    line-height: 44px;
    padding: 0 10px;
    .left {
      flex: 1;
      span{
        font-size: 12px;
      }
    }
    .right{
      flex: 1;
      text-align: right;
      line-height: 50px;
    }
    .center{
      flex: 2;
      text-align: center;
    }
  }
  .tabs{
    height: 48px;
    line-height: 49px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 14px;
    padding: 0 10px;
    border-bottom: 1px solid #ced2d6;
    .left{
      flex: 1;
    }
    .center{
      flex: 2;
    }
    .right{
      flex: 1;
    }
  }
}
</style>